<template>
  <div class="docker">
    <span
      v-for="(item, index) in DockerList"
      :key="item.id"
      :class="{ docker__item: true, 'docker__item--active': index == num }"
    >
      <router-link :to="item.to">
        <div class="iconfont" v-html="item.icon" />
        <div class="docker__title">{{ item.text }}</div>
      </router-link>
    </span>
  </div>
</template>
<script>
export default {
  name: "DockerPage",
  props: ["num"],
  setup() {
    const DockerList = [
      {
        id: 1,
        icon: "&#xe6bb;",
        text: "首页",
        to: "/",
      },
      {
        id: 2,
        icon: "&#xe645;",
        text: "购物车",
        to: "/cart",
      },
      {
        id: 3,
        icon: "&#xe605;",
        text: "订单",
        to: "/orderList",
      },
      {
        id: 4,
        icon: "&#xe660;",
        text: "我的",
        to: "/user",
      },
    ];
    return { DockerList };
  },
};
</script>
<style lang="scss" scoped>
@import "../../style/viriables.scss";
.docker {
  display: flex;
  position: absolute;
  box-sizing: border-box;
  padding: 0 0.18rem;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 0.49rem;
  border-top: 0.01rem solid $content-bgColor;
  background-color: $color-fff;
  overflow: hidden;
  &__item {
    flex-grow: 1;
    text-align: center;
    height: 100%;
    a {
      text-decoration: none;
      color: $content-fontcolor;
    }
    .iconfont {
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 0.18rem;
      width: 100%;
      margin: 0.07rem 0 0.02rem 0;
    }
    .docker__title {
      font-size: 0.2rem;
      transform: scale(0.5, 0.5);
      transform-origin: center top;
    }
  }
  &__item--active {
    a {
      color: #1fa4fc;
    }
  }
}
</style>